
<head>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#gallery {
	float: right;
	width: 43%;
	min-height: 28em;
	padding: 1%;
	background-color: #A7DECE;
	border-color: black;
}

.gallery.custom-state-active {
	background: #eee;
}

.gallery li {
	float: left;
	height:110px;
	width:80px;
	padding: 0.4em;
	margin: 0 0.4em 0.4em 0;
	text-align: center;
}

.gallery li h5 {
	margin: 0 0 0.4em;
	cursor: move;
}

.gallery li a {
	float: right;
}

.gallery li a.ui-icon-zoomin {
	float: left;
}

.gallery li img {
	height: 70px;
	width:80px;
	cursor: move;
}

#trash {
	float: left;
	width: 43%;
	min-height: 28em;
	padding: 1%;
	background-color: #A7DECE;
	border-color: #00000000;
}

#trash h4 {
	line-height: 16px;
	margin: 0 0 0.4em;
}

#trash h4 .ui-icon {
	float: left;
}

#trash .gallery h5 {
	display: none;
}

#trash .gallery li img {
	height: 90px;
	width:80px;
	cursor: move;
}
</style>
<script>
  $(function() {
    // there's the gallery and the trash
    var $gallery = $( "#gallery" ),
      $trash = $( "#trash" );
      
    // let the gallery items be draggable
    $( "li", $gallery ).draggable({
      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: "move"
    });

    // let the trash items be draggable
    $( "li", $trash ).draggable({
      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: "move"
    });
    
    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
      accept: "#gallery > li",
      activeClass: "ui-state-highlight",
      drop: function( event, ui ) {
        deleteImage( ui.draggable );
      }
    });
    $( '#btnSubmit' ).click(function(){
        
        var nomes = $trash.find("input");
        var jsonNomes = [];
        
        $.each(nomes, function(index, valor){
            
            var nome = $(valor).val();
            var nomeAtual = $( '#arv' ).val();
            $( '#arv' ).val(nomeAtual + nome+",");
            jsonNomes[index] = {text: nome};
        });
        
        console.log(nomes);
        
    $.ajax({
    type: "POST",
    url: 'rotacao',
    data: jsonNomes,
    success: function(data)
            {
                $trash.html(data);
            },
            error: function(response)
            {
               console.log(response);
            }
            
    });
});
 
    // let the gallery be droppable as well, accepting items from the trash
    $gallery.droppable({
      accept: "#trash li",
      activeClass: "custom-state-active",
      drop: function( event, ui ) {
        recycleImage( ui.draggable );
      }
    });
 
    // image deletion function
    var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Cancelar Atividade do Aluno' class='ui-icon ui-icon-refresh'>Cancelar Atividade do Aluno</a>";
    function deleteImage( $item ) {
    	var value = document.getElementById('vaga').innerHTML;
    	if(parseInt(value) == 0) {
    		window.alert('Quantidade de Vagas Excedida');
    	} else {
    		document.getElementById('vaga').innerHTML = value -1;
      		$item.fadeOut(function() {
        	var $list = $( "ul", $trash ).length ?
          	$( "ul", $trash ) :
          	$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
 
        	$item.find( "a.ui-icon-plus" ).remove();
        	$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
          	$item
            .animate({ width: "80px" })
            .find( "img" )
              .animate({ height: "90px" });
        	});
      		});
    	}
    }
 
    // image recycle function
    var trash_icon = "<a href='<?php echo Yii::app()->request->baseUrl; ?>/css/add.JPEG' title='Ativar Aluno' class='ui-icon ui-icon-plus'>Ativar este Aluno</a>";
    function recycleImage( $item ) {
      $item.fadeOut(function() {
          
    	  var value = document.getElementById('vaga').innerHTML;
      	document.getElementById('vaga').innerHTML = parseInt(value) +1;
        $item
          .find( "a.ui-icon-refresh" )
            .remove()
          .end()
          .css( "width", "80px")
          .append( trash_icon )
          .find( "img" )
            .css( "height", "70px" )
          .end()
          .appendTo( $gallery )
          .fadeIn();
      });
      
        
	
    }
 
    // image preview function, demonstrating the ui.dialog used as a modal window
    function viewLargerImage( $link ) {
      var src = $link.attr( "href" ),
        title = $link.siblings( "img" ).attr( "alt" ),
        $modal = $( "img[src$='" + src + "']" );
 
      if ( $modal.length ) {
        $modal.dialog( "open" );
      } else {
        var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
          .attr( "src", src ).appendTo( "body" );
        setTimeout(function() {
          img.dialog({
            title: title,
            width: 400,
            modal: true
          });
        }, 1 );
      }
    }
 
    // resolve the icons behavior with event delegation
    $( "ul.gallery > li" ).click(function( event ) {
      var $item = $( this ),
        $target = $( event.target );
 
      if ( $target.is( "a.ui-icon-plus" ) ) {
        deleteImage( $item );
      } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
        viewLargerImage( $target );
      } else if ( $target.is( "a.ui-icon-refresh" ) ) {
        recycleImage( $item );
      }
 
      return false;
    });
  });
  </script>
</head>
<body>
	<?php
	
	$this->pageTitle=Yii::app()->name . ' - Rotação de Alunos';
	
	$this->breadcrumbs = array(
			Aluno::getModuleName().'s' => array('admin'),
			'Rotação de '.Aluno::getModuleName().'s',
	);

	$form = $this->beginWidget('CActiveForm', array(
			'id' => 'cadastrados-form',
			'enableAjaxValidation' => false,
			'enableClientValidation' => true,
	));

	$ativos = $this->getAlunosAtivos();
	$vagas_ocupadas = 0;
	if($ativos != null && !empty($ativos)) {
		$vagas_ocupadas = count($ativos);
	}
	?>

	<p align="right">
		VAGAS RESTANTES: <b id="vaga" style="font-size: 19px"><?php echo 7 - $vagas_ocupadas; ?>
		</b>
	
	
	<p />

	<br />
	<?php
	$this->widget('zii.widgets.jui.CJuiButton', array(
			'id' => 'btnSubmit',
			'buttonType' => 'submit',
			'name' => 'btnSubmit',
			'value' => '1',
			'caption' => '  Concluir  ',
			'htmlOptions' => array('class' => 'ui-button-primary')
	));

	?>
	</p>
	<div>
		<br />
		<legend></legend>
	</div>
	<input id="arv" name="arv" type="hidden">
	<div class="ui-widget ui-helper-clearfix">

		<div id="trash" class="ui-widget-content ui-state-default">
			<h5 align="center">
				<?php echo Aluno::getModuleName().'s Ativos'; ?>
			</h5>
			<?php 
			$historico = array();
			if(!empty($ativos)) {
				foreach($ativos as $ativo) {
					$pessoa = Pessoa::model()->findByAttributes(array('id'=>$ativo->pessoa_id));
					if($pessoa == null || in_array ( $pessoa , $historico)) {
						continue;
					}
					$historico[] = $pessoa;
					?>
			<ul class='gallery ui-helper-reset'>
				<li class="ui-widget-content ui-corner-tr"><input id="id" name="id"
					type="hidden" value="<?php echo $ativo->id?>">

					<h5 style="font-size: 10px">
						<?php 
						$myvalue1 = $pessoa->nome;
						$arr = explode(' ',trim($myvalue1));
						echo $arr[0]; ?>
					</h5> <?php echo CHtml::image(Utils::findImageUrl($ativo->foto), $pessoa->nome,array('width'=>50,'height'=>50)); ?>
					<a
					href="<?php echo Yii::app()->request->baseUrl.'\images\\'.$ativo->foto ?>"
					title="Visualisar Aluno" class="ui-icon ui-icon-zoomin">Espandir
						detalhes</a> <a href='link/to/recycle/script/when/we/have/js/off'
					title='Remover Aluno dos Ativos' class='ui-icon ui-icon-refresh'>Remover
						Aluno dos Ativos</a>
				</li>
			</ul>
			<?php }
} ?>
		</div>

		<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
			<h5 align="center">
				<?php echo Aluno::getModuleName().'s Em Espera'; ?>
			</h5>
			<?php 
			$alunos = $this->getAlunosEmEspera();
			$historico2 = array();
			if(!empty($alunos)) {
				foreach($alunos as $aluno) {

					$pessoa = Pessoa::model()->findByAttributes(array('id'=>$aluno->pessoa_id));
					if($pessoa == null || in_array ( $pessoa , $historico2)) {
						continue;
					}
					$historico2[] = $pessoa;

					?>
			<li class="ui-widget-content ui-corner-tr"><input id="id" name="id"
				type="hidden" value="<?php echo $aluno->id?>">
				<h5 class="name_grid" style="font-size: 10px">
					<?php 
						$myvalue1 = $pessoa->nome;
						$arr = explode(' ',trim($myvalue1));
						echo $arr[0]; ?>
				</h5> <?php echo CHtml::image(Utils::findImageUrl($aluno->foto), $pessoa->nome,array('width'=>50,'height'=>50)); ?>
				<a
				href="<?php echo Yii::app()->request->baseUrl.'\images\\'.$aluno->foto ?>"
				title="Visualisar Aluno" class="ui-icon ui-icon-zoomin">Espandir
					detalhes</a> <a
				href="<?php echo Yii::app()->request->baseUrl; ?>/css/add.JPEG"
				title="Matricular Este Aluno" class="ui-icon ui-icon-plus">Ativar
					Aluno</a>
			</li>
			<?php }
}?>
		</ul>


		<?php $this->endWidget(); ?>
	</div>